import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  View,
  Text,
  Platform,
  StyleSheet,
  ViewPropTypes,
  StatusBar
} from 'react-native'

const NAV_BAR_HEIGHT_ANDROID = 50
const NAV_BAR_HEIGHT_IOS = 44
const STATUS_BAR_HEIGHT = 20

const {navHeight, statusHeight} = Platform.select({
  ios: {
    navHeight: NAV_BAR_HEIGHT_IOS,
    statusHeight: STATUS_BAR_HEIGHT
  },
  android: {
    navHeight: NAV_BAR_HEIGHT_ANDROID,
    statusHeight: 0
  }
})

const statusBarShape = {
  animated: PropTypes.bool,
  barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),
  hidden: PropTypes.bool,
  backgroundColor: PropTypes.string,
  translucent: PropTypes.bool,
  networkActivityIndicatorVisible: PropTypes.bool,
  showHideTransition: PropTypes.oneOf(['fade', 'slide'])
}

export default class extends Component {
  static propTypes = {
    style: ViewPropTypes.style,
    title: PropTypes.string,
    titleView: PropTypes.element,
    titleLayoutStyle: ViewPropTypes.style,
    hide: PropTypes.bool,
    leftButton: PropTypes.element,
    rightButton: PropTypes.element,
    statusBar: PropTypes.shape(statusBarShape)
  }
  static defaultProps = {
    statusBar: {
      barStyle: 'light-content',
      hidden: false,
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      title: '',
      hide: false
    }
  }

  _getButtonElement(data) {
    return (
      <View style={styles.navBarButton}>
        {data? data : null}
      </View>
    )
  }

  render() {
    let statusBar = !this.props.statusBar.hidden ?
      <View style={styles.statusBar}><StatusBar {...this.props.statusBar}/></View> : null

    let titleView = this.props.titleView ? this.props.titleView : <Text ellipsizeMode='tail' numberOfLines={1} style={styles.title}>{this.props.title}</Text>

    let content = <View style={styles.navBar}>
      {this._getButtonElement(this.props.leftButton)}
      <View style={styles.titleViewContainer}>
        {titleView}
      </View>
      {this._getButtonElement(this.props.rightButton)}
    </View>

    return (
      <View style={styles.container}>
        {statusBar}
        {content}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#2196F3'
  },
  navBar: {
    justifyContent: 'space-between',
    alignItems: 'center',
    height: navHeight,
    flexDirection: 'row',
  },
  titleViewContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: 40,
    right: 40,
    top: 0,
    bottom: 0,
  },
  title: {
    fontSize: 20,
    color: '#fff'
  },
  statusBar: {
    height: statusHeight
  },
  navBarButton: {
    alignItems: 'center'
  }
})
